<template>
  <div>
    <t-drawer :visible="props.visible" size="medium" :header="$t('pages.posts.settings')" :footer="null" @close="closeDrawer">
      <t-list :split="false" size="small">
        <t-list-item>
          <t-space direction="vertical" :size="3">
            <label>Post URL</label>
            <t-input v-model="info.slug" class="post-item" >
              <template #prefix-icon>
                <link-icon />
              </template>
            </t-input> <span>{{ info.slug }}</span>
          </t-space>
        </t-list-item>
        <t-list-item>
          <t-space direction="vertical" :size="35">
            <t-space><label>Feature Image</label><img-upload @success="uploadSuccess"></img-upload></t-space>
            <t-image :src="info.feature_image"></t-image>

            <t-input v-model="info.feature_image" style="display:none"></t-input>
          </t-space>
        </t-list-item>
        <t-list-item>
          <t-space direction="vertical" :size="3">
            <label>Publish date</label>
            <t-date-picker v-model="info.publish_at" enableTimePicker class="post-item" />
          </t-space>
        </t-list-item>
        <t-list-item>
          <t-space direction="vertical" :size="3">
            <label>Tags </label>
            <t-select v-model="tags" @change="onTagChange" multiple placeholder="please select tags"  class="post-item">
                <t-option v-for="option in props.tagOptions" :key="option.value" :value="option.value" :label="option.label"></t-option>
            </t-select>

          </t-space>
        </t-list-item>
        <t-list-item>
          <t-space direction="vertical" :size="3">
            <label>Post access</label>
            <t-select v-model="postVisiblity" placeholder="please select access"  class="post-item">
              <t-option label="Public" value="public" />
              <t-option label="Members only" value="members-only" />
              <t-option label="Specific tier(s)" value="tier" />
            </t-select>
          </t-space>
        </t-list-item>
        <t-list-item>
          <t-space direction="vertical" :size="3">
            <label>Excerpt</label>
            <t-textarea :autosize="{ minRows: 3, maxRows: 5 }" class="post-item" placeholder="请输入内容" />
          </t-space>
        </t-list-item>
        <!-- <t-list-item>
          <t-space direction="vertical" :size="3">
            <label>Authors</label>
            <t-select v-model="info.visibility" placeholder="please select access" multiple class="post-item">
              <t-option label="Public" value="public" />
              <t-option label="Members only" value="members-only" />
              <t-option label="Specific tier(s)" value="tier" />
            </t-select>
          </t-space>
        </t-list-item> -->

        <t-list-item>
          <t-space direction="vertical" :size="3">
            <label>Status </label>
            <t-radio-group v-model="info.status" :options="postStatusOptions" @change="onChangeStatus">

            </t-radio-group>

          </t-space>
        </t-list-item>
      </t-list>

      <t-space direction="vertical" style="width:100%">
        <t-collapse expand-icon-placement="right" :expand-on-row-click="!onlyIcon">
          <t-collapse-panel value="0" >
            <template #header>
              <t-space direction="horizontal" size="small" class="list-item">
              <StarIcon />Feature this post <t-switch v-model="postFeature" />
            </t-space>
            </template>
          </t-collapse-panel>
          <t-collapse-panel value="1">
            <template #header>Meta data</template>
            <t-form>
              <t-form-item label="标题">
                <t-input v-model="metaData.meta_title"></t-input>
              </t-form-item>
              <t-form-item label="描述">
                <t-textarea v-model="metaData.meta_description"></t-textarea>
              </t-form-item>
            </t-form>
          </t-collapse-panel>

        </t-collapse>

        <t-button block theme="danger" variant="outline" size="large" @click="onDeletePost">
          <template #icon><DeleteIcon /></template> Delete post
        </t-button>
      </t-space>

    </t-drawer>
  </div>
</template>

<script setup type="ts">
  import { ref,reactive,onMounted, computed ,watch, nextTick} from 'vue';
import { useRouter } from 'vue-router';
import { SearchIcon,LinkIcon,ChevronRightIcon,StarIcon,DeleteIcon,RefreshIcon } from 'tdesign-icons-vue-next';
import { MessagePlugin } from 'tdesign-vue-next';
import { useSettingStore } from '@/store';
import { prefix } from '@/config/global';
import { useLocale } from '@/locales/useLocale';
import dayjs from 'dayjs'
import { getTagsList } from '@/api/tags';
import imgUpload from '../../../components/upload/imgUpload.vue'


const { locale } = useLocale();


const emits=defineEmits(['onClose','onChange'])
const props=defineProps({
  visible:{
    type:Boolean,
    default:false
  },
  tagOptions:{
    type:Array
  },
  data:{
    type:Object,
    default:
    {
        id: '',
        canonical_url: '',
        codeinjection_foot: '',
        codeinjection_head: '',
        created_at: '',
        createdby: '',
        feature:0,
        feature_image: '',
        html: '',
        locale: '',
        mobiledoc: '',
        plaintext: '',
        published_at: '',
        published_by: '',
        show_title_and_feature_image: '',
        slug: '',
        status: 'draft',
        title: '',
        type: '',
        updated_at: '',
        updated_by: '',
        uuid: '',
        visibility: 'public',
        metas:[]
    }
  },
  metaData:{
    type:Object,
    default:{
      post_id:'',
      meta_title:'',
      meta_description:''
    }
  }
})

const postStatusOptions=[
  {
      value: 'draft',
      label: 'draft',
   },
    {
        value: 'scheduled',
        label: 'scheduled',
      },
      {
          value: 'published',
          label: 'published',
        },
]
const info=ref({})
const postStatus=ref('')
const postVisiblity=ref('')
const postFeature=ref(false)
const onChange=()=>{
  emits('onChange',info.value)
}
const onDeletePost=()=>{
  emits('onDelete');
}

// 日期选择
const onPick = (value, context) => console.log('onPick:', value, context);
const onPickChange = (value, context) => {
  console.log('onPickChange:', value, context);
  console.log(
    'timestamp:',
    context.dayjsValue.map((d) => d.valueOf()),
  );
  console.log(
    'YYYYMMDD:',
    context.dayjsValue.map((d) => d.format('YYYYMMDD'))
  );

};
const closeDrawer=()=>{
  info.value.visibility=postVisiblity.value
  info.value.tags=tags.value.join(',')
  info.value.feature=postFeature.value==true?1:0
  if(typeof(info.value.visibility)==`object`)
  {
    info.value.visibility="public"
  }

  emits('onClose')
}
//post status change
const onChangeStatus=(checkedValues)=>{
   postStatus.value=checkedValues
   info.value.status=postStatus.value
   console.log(checkedValues)
}
const uploadSuccess=(url)=>{
  info.value.feature_image=url
}
const tags=ref('')
const onTagChange=(value)=>{
  console.log('tag select handleChange:', value);
}


 const onlyIcon = ref(false);
const metaData=ref({
  post_id:'',
  meta_title:'',
  meta_description:''
})




onMounted(async ()=>{

})
watch(()=>props.visible,
()=>{
  if(props.visible==true)
  {
     info.value=props.data
     postVisiblity.value=info.value.visibility
     postFeature.value=info.value.feature==1?true:false;
     //console.log('info.value',JSON.stringify(info.value))
      if(info.value.tags)
      {
        tags.value=info.value.tags.split(',')
      }else
      {
        tags.value=[]
      }


      metaData.value=props.metaData
  }
  else
  {
    metaData.value={
      post_id:'',
      meta_title:'',
      meta_description:''
    }
  }
})
</script>

<style lang="less" scoped>
  .post-item {
    width: 450px;
  }

  .list-item {
    display: flex;
    align-items: center;
  }

  .list-item-content {}
</style>
